<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Machine Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        // Helper function to draw an arrow
        function drawArrow(context, fromx, fromy, tox, toy, headlen) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            const originalLineWidth = context.lineWidth;
            context.lineWidth = Math.max(1, originalLineWidth); // Ensure arrowhead lines are visible
            context.beginPath();
            context.moveTo(fromx, fromy);
            context.lineTo(tox, toy);
            context.stroke();
            context.beginPath();
            context.moveTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            context.closePath();
            context.fill();
            context.lineWidth = originalLineWidth;
        }

        // --- Main Drawing ---

        // 1. Draw the machine body outline
        ctx.beginPath();
        ctx.moveTo(300, 100);
        ctx.lineTo(300, 145);
        ctx.moveTo(300, 155);
        ctx.lineTo(300, 200);
        ctx.lineTo(170, 200);
        ctx.lineTo(170, 180);
        ctx.lineTo(150, 180);
        ctx.lineTo(150, 170);
        ctx.lineTo(170, 170);
        ctx.lineTo(170, 130);
        ctx.lineTo(150, 130);
        ctx.lineTo(150, 120);
        ctx.lineTo(170, 120);
        ctx.lineTo(170, 100);
        ctx.lineTo(300, 100);
        ctx.stroke();

        // 2. Draw the cross-hatching
        ctx.save();
        ctx.beginPath();
        ctx.rect(170, 100, 130, 100); // Main rectangular area for clipping
        ctx.clip();
        ctx.lineWidth = 1.5;
        for (let x = 170; x <= 400; x += 10) {
            ctx.beginPath();
            ctx.moveTo(x, 100);
            ctx.lineTo(x - 100, 200);
            ctx.stroke();
        }
        ctx.restore();
        ctx.lineWidth = 2; // Reset line width

        // 3. Draw the outlet pipe
        ctx.beginPath();
        ctx.moveTo(300, 145);
        ctx.lineTo(320, 145);
        ctx.moveTo(300, 155);
        ctx.lineTo(320, 155);
        ctx.stroke();

        // 4. Draw input arrows
        drawArrow(ctx, 110, 125, 150, 125, 10);
        drawArrow(ctx, 110, 175, 150, 175, 10);

        // 5. Draw internal arrow pointing to outlet
        drawArrow(ctx, 280, 150, 310, 150, 8);

        // 6. Draw the water jet spray
        const jetOriginX = 320;
        const jetOriginY = 150;

        // Draw a thick base for the jet
        ctx.beginPath();
        ctx.moveTo(jetOriginX, 145);
        ctx.lineTo(jetOriginX + 10, 142);
        ctx.lineTo(jetOriginX + 10, 158);
        ctx.lineTo(jetOriginX, 155);
        ctx.closePath();
        ctx.fill();

        // Draw spray lines and segments
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(jetOriginX + 5, jetOriginY); ctx.lineTo(380, 135);
        ctx.moveTo(jetOriginX + 5, jetOriginY); ctx.lineTo(390, 145);
        ctx.moveTo(jetOriginX + 5, jetOriginY); ctx.lineTo(375, 165);
        ctx.moveTo(jetOriginX + 5, jetOriginY); ctx.lineTo(385, 158);
        ctx.moveTo(jetOriginX + 5, jetOriginY); ctx.lineTo(370, 128);
        ctx.stroke();

        ctx.lineWidth = 4;
        ctx.lineCap = 'butt';
        ctx.beginPath();
        ctx.moveTo(340, 140); ctx.lineTo(360, 138);
        ctx.moveTo(350, 160); ctx.lineTo(365, 162);
        ctx.moveTo(365, 148); ctx.lineTo(380, 147);
        ctx.moveTo(335, 155); ctx.lineTo(355, 157);
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width
        ctx.lineCap = 'round';

        // 7. Draw labels and caption
        ctx.font = "italic 20px Times New Roman";
        ctx.textAlign = "center";
        
        // T1 label
        ctx.fillText("T", 90, 130);
        ctx.font = "italic 14px Times New Roman";
        ctx.fillText("1", 101, 134);

        // T2 label
        ctx.font = "italic 20px Times New Roman";
        ctx.fillText("T", 90, 180);
        ctx.font = "italic 14px Times New Roman";
        ctx.fillText("2", 101, 184);

        // T (output) label
        ctx.font = "italic 20px Times New Roman";
        ctx.fillText("T", 410, 155);

        // Figure caption
        ctx.font = "16px Times New Roman";
        ctx.fillText("Fig. 1.13.", 250, 280);
    </script>
</body>
</html>